<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <title>UNIS Design System v4</title>
    <meta name="author" content="">
    <meta name="generator" content="">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="../styles/global.css">
    <link rel="stylesheet" href="css/unis.css">
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div class="container-fluid" id="app">
    <div class="row bg-pearl-blue" style="padding-top: 15px;">
        <div class="col-8">
            <h2>03. Typography</h2>
            <p style="padding-left: 46px;">The following CSS files need to be introduced.</p>
        </div>

        <div class="col-4" style="text-align: right; padding-top: 30px;"><a class="btn btn-primary"
                                                                            href="./css/typography.css"
                                                                            download="typography">download
            (typography.css)</a>
            <a class="btn btn-primary" href="./css/fonts.zip" download="fonts.zip">download
            (fonts.zip)</a></div>
    </div>
    <div class="d-flex flex-row">
        <div class="col-12 isolation">
            <div class="text-center">
                <span style="font-size: 100px; font-weight: 600;"> Aa</span>
                <br>
                <span style="font-size:50px; font-weight: 600;">Avenir Next</span>
            </div>
            <br>
            <br>
            <br>
            <div style=" margin-right: -30px;  margin-left: -30px;">
                <table class="table typographytable">
                    <thead>
                    <tr>
                        <th scope="col">label</th>
                        <th scope="col">Header</th>
                        <th scope="col">Style / Spacing / Size</th>
                        <th scope="col">Cases</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>h1</td>
                        <td><h1>Heading 1</h1></td>
                        <td>Demibold / 0.4px / 32px</td>
                        <td>Large page titles</td>
                    </tr>
                    <tr>
                        <td>h2
                        </th>
                        <td><h2>Heading 2</h2></td>
                        <td>Demibold / 0.4px / 24px</td>
                        <td>Page titles</td>
                    </tr>
                    <tr>
                        <td>h3</td>
                        <td><h3>Heading 3</h3></td>
                        <td>Demibold / 0.4px / 18px</td>
                        <td>Subpage titles, Modal title</td>
                    </tr>
                    <tr>
                        <td>h4</td>
                        <td><h4>Heading 4</h4></td>
                        <td>Medium / 0.4px / 16px</td>
                        <td>Subsubpage title, Sidenav links, Modal Description</td>
                    </tr>
                    <tr>
                        <td>h5</td>
                        <td><h5>Heading 5</h5></td>
                        <td>Medium / 0.4px / 14px</td>
                        <td>Subsubsubpage title, Topnav links</td>
                    </tr>
                    <tr>
                        <td>h6</td>
                        <td><h6>Heading 6</h6></td>
                        <td>Demibold / 0.3px / 13px</td>
                        <td>Table header</td>
                    </tr>
                    <tr>
                        <td>.bod-t1</td>
                        <td><span class="bod-t1">Body 1</span></td>
                        <td>Medium / 0.3px / 13px</td>
                        <td>Input label</td>
                    </tr>
                    <tr>
                        <td>.bod-t2</td>
                        <td><span class="bod-t2">Body 2</span></td>
                        <td>Regular / 0.3px / 13px</td>
                        <td>Input text</td>
                    </tr>
                    <tr>
                        <td>.but-t1</td>
                        <td><span class="but-t1">Button 1</span></td>
                        <td>Medium / 0.3px / 14px</td>
                        <td>Button label</td>
                    </tr>
                    <tr>
                        <td>.but-t2</td>
                        <td><span class="but-t2">Button 2</span></td>
                        <td>Demibold / 0.3px / 12px</td>
                        <td>Button text</td>
                    </tr>
                    <tr>
                        <td>.sm-t</td>
                        <td><span class="sm-t">Small Text</span></td>
                        <td>Demibold / 0.3px / 9px</td>
                        <td>Labels</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

</body>
</html>